<template>
	<!-- <view class="container" :style="{
		paddingBottom: showMoreTool ? '220rpx' : '120rpx'
	}"> -->
	<view class="container">
		<!-- 操作工具 -->
		<view class="tool-view">
			<view class="tool">
				<!-- <jinIcon class="single" type="&#xe6f3;" font-size="44rpx" title="插入图片" @click="insertImage"></jinIcon> -->
				<jinIcon class="single" type="&#xe6f9;" font-size="44rpx" title="修改文字样式" @click="showMore"
					:color="showMoreTool ? activeColor : '#666666'"></jinIcon>
				<jinIcon class="single" type="&#xe6eb;" font-size="44rpx" title="分割线" @click="insertDivider"></jinIcon>
				<jinIcon class="single" type="&#xe6e8;" font-size="44rpx" title="撤销" @click="undo"></jinIcon>
				<jinIcon class="single" type="&#xe705;" font-size="44rpx" title="重做" @click="redo"></jinIcon>
				<!-- 这行注释是有隐私发布的按钮选择 -->
				<!-- <jinIcon class="single" type="&#xeb8a;" font-size="44rpx" title="设置" @click="showSetting"></jinIcon> -->
				<jinIcon class="single" type="&#xeb8a;" font-size="44rpx" title="设置" @click="release"></jinIcon>
			</view>
			<!-- 文字相关操作 -->
			<view class="font-more" :style="{ height: showMoreTool ? '100rpx' : 0 }">
				<jinIcon class="single" type="&#xe6e7;" font-size="44rpx" title="加粗" @click="setBold"
					:color="showBold ? activeColor : '#666666'"></jinIcon>
				<jinIcon class="single" type="&#xe6fe;" font-size="44rpx" title="斜体" @click="setItalic"
					:color="showItalic ? activeColor : '#666666'"></jinIcon>
				<jinIcon class="single" type="&#xe6f8;" font-size="44rpx" title="分割线" @click="setIns"
					:color="showIns ? activeColor : '#666666'"></jinIcon>
				<jinIcon class="single" type="&#xe6e3;" font-size="44rpx" title="标题" @click="setHeader"
					:color="showHeader ? activeColor : '#666666'"></jinIcon>
				<jinIcon class="single" type="&#xe6f1;" font-size="44rpx" title="居中" @click="setCenter"
					:color="showCenter ? activeColor : '#666666'"></jinIcon>
				<jinIcon class="single" type="&#xe6ed;" font-size="44rpx" title="居右" @click="setRight"
					:color="showRight ? activeColor : '#666666'"></jinIcon>
			</view>
			<view class="setting-layer-mask" v-if="showSettingLayer" @click="showSetting"></view>
			<!-- <view class="setting-layer" v-if="showSettingLayer">
				<view class="single" @click="release(true)">
					<jinIcon class="icon" type="&#xe639;" ></jinIcon>
					<view>公开发布</view>
				</view>
				<view class="single" @click="release(false)">
					<jinIcon class="icon" type="&#xe655;" ></jinIcon>
					<view>私密保存</view>
				</view>
			</view> -->
		</view>

		<editor class="ql-container" :placeholder="placeholder" :show-img-size="true" :show-img-toolbar="true"
			:show-img-resize="true" @ready="onEditorReady" id="editor" @statuschange="statuschange" @focus="editFocus" @blur="editBlur" @input="editInput" ref="editot"></editor>

	</view>
</template>

<script>
	import jinIcon from './jin-icons.vue';
	// var http = require("@/common/utils/http.js");
	import {
		API_BASE_URL
	} from "@/common/config.js";
	export default {
		props: {
			// 点击图片时显示图片大小控件
			showImgSize: {
				type: Boolean,
				default: false
			},
			// 点击图片时显示工具栏控件
			showImgToolbar: {
				type: Boolean,
				default: false
			},
			// 点击图片时显示修改尺寸控件
			showImgResize: {
				type: Boolean,
				default: false
			},
			// 占位符
			placeholder: {
				type: String,
				default: '请输入...'
			},
			// 图片上传的地址
			// uploadFileUrl: {
			// 	type: String,
			// 	default: '#'
			// },
			// 上传文件时的name
			fileKeyName: {
				type: String,
				default: 'file'
			},
			// 上传图片时，http请求的header
			header: {
				type: Object
			},
			// 初始化html
			html: {
				type: String
			}
		},
		computed: {

		},
		data() {
			return {
				showMoreTool: false,
				showBold: false,
				showItalic: false,
				showIns: false,
				showHeader: false,
				showCenter: false,
				showRight: false,
				showSettingLayer: false,
				activeColor: '#F56C6C'
			};
		},
		components: {
			jinIcon
		},
		created() {},
		methods: {
			onEditorReady(e) {
				uni.createSelectorQuery()
					.in(this)
					.select('.ql-container')
					.fields({
						size: true,
						context: true
					}, res => {
						this.editorCtx = res.context;
						this.editorCtx.setContents({
							html: this.html
						})
					})
					.exec();
			},
			undo() {
				this.editorCtx.undo();
			},
			// 插入图片
			insertImage() {
				// uni.chooseImage({
				// 	count: 9, //默认9
				// 	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				// 	sourceType: ['album', 'camera'], //从相册选择
				// 	success: async (res) => {
				// 		var tempFilePaths = res.tempFilePaths;
				// 		uni.showLoading({
				// 			title: ''
				// 		})
				// 		console.log(tempFilePaths)
				// 		for (let temp of tempFilePaths) {
				// 			uni.uploadFile({
				// 			 url: `${API_BASE_URL}${'/p/file/upload'}`, //仅为示例，非真实的接口地址
				// 				filePath: tempFilePaths[0],
				// 				name: 'file',
				// 				header: {
				// 					// 'Authorization': !needToken ? undefined : 'Bearer' + ' ' + uni.getStorageSync('USER_INFO').access_token || wx.getStorageSync('tempToken'),
				// 					'Authorization': 'Bearer' + ' ' + uni.getStorageSync('USER_INFO')
				// 						.access_token,
				// 					'locale': wx.getStorageSync('lang') || 'zh_CN'
				// 				},
				// 				success: (res2) => {
				// 					// 上传完成后处理
				// 					console.log(res2)
				// 					var img = {};
				// 					img.path = JSON.parse(res2.data).filePath;
				// 					img.url = JSON.parse(res2.data).resourcesUrl + JSON.parse(res2
				// 						.data).filePath;
				// 					this.editorCtx.insertImage({
				// 						src: img.url, // 此处需要将图片地址切换成服务器返回的真实图片地址
				// 						alt: '图片',
				// 						success: () => {}
				// 					});
				// 					uni.hideLoading()
				// 				},
				// 				fail: (error) => {
				// 					uni.hideLoading()
				// 				}
				// 			});
				// 		}
				// 	}
				// });
				let that = this;
				uni.chooseImage({
					count: 9,
					// 默认9
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: function(res) {
						// 图片的本地临时文件路径列表
						var tempFilePaths = res.tempFilePaths;
						uni.showLoading({
							mask: true
						});
						for (var i = 0; i < tempFilePaths.length; i++) {
							var params = {
								url: "/p/file/upload",
								filePath: tempFilePaths[i],
								name: 'file',
								callBack: function(res2) {
									uni.hideLoading()
									var img = {};
									img.path = JSON.parse(res2).filePath;
									img.url = JSON.parse(res2).resourcesUrl + JSON.parse(res2)
									.filePath;
									// ths.skuList[k].pic = img.url;
									that.editorCtx.insertImage({
										src: img.url, // 此处需要将图片地址切换成服务器返回的真实图片地址
										alt: '图片',
										success: () => {}
									});
								}
							};
							http.upload(params);
						}

					},
					fail: function(err) {
						console.log(err)
					}
				});
			},
			insertDivider() {
				this.editorCtx.insertDivider();
			},
			redo() {
				this.editorCtx.redo();
			},
			showMore() {
				this.showMoreTool = !this.showMoreTool;
				this.editorCtx.setContents()
			},
			setBold() {
				this.showBold = !this.showBold;
				this.editorCtx.format('bold');
			},
			setItalic() {
				this.showItalic = !this.showItalic;
				this.editorCtx.format('italic');
			},
			checkStatus(name, detail, obj) {
				if (detail.hasOwnProperty(name)) {
					this[obj] = true;
				} else {
					this[obj] = false;
				}
			},
			statuschange(e) {
				var detail = e.detail;
				this.checkStatus('bold', detail, 'showBold');
				this.checkStatus('italic', detail, 'showItalic');
				this.checkStatus('ins', detail, 'showIns');
				this.checkStatus('header', detail, 'showHeader');
				if (detail.hasOwnProperty('align')) {
					if (detail.align == 'center') {
						this.showCenter = true;
						this.showRight = false;
					} else if (detail.align == 'right') {
						this.showCenter = false;
						this.showRight = true;
					} else {
						this.showCenter = false;
						this.showRight = false;
					}
				} else {
					this.showCenter = false;
					this.showRight = false;
				}
			},
			setIns() {
				this.showIns = !this.showIns;
				this.editorCtx.format('ins');
			},
			setHeader() {
				this.showHeader = !this.showHeader;
				this.editorCtx.format('header', this.showHeader ? 'H2' : false);
			},
			setCenter() {
				this.showCenter = !this.showCenter;
				this.editorCtx.format('align', this.showCenter ? 'center' : false);
			},
			setRight() {
				this.showRight = !this.showRight;
				this.editorCtx.format('align', this.showRight ? 'right' : false);
			},
			showSetting() {
				this.showSettingLayer = !this.showSettingLayer;
			},
			async editFocus() {},
			editBlur() {},
			editInput() {
				setTimeout(() => {
					this.showSettingLayer = false;
					this.editorCtx.getContents({
						success: res => {
							Object.assign(res, {
								isPublish: true
							})
							this.$emit('editOk', res)
						}
					})
				}, 500)
			},
			// 发布因为这里不需要隐私发布所以暂时去掉 isPublic this.showSettingLayer = false;
			release() {
				this.showSettingLayer = false;
				this.editorCtx.getContents({
					success: res => {
						// Object.assign(res, {
						// 	isPublic: isPublic
						// })
						this.$emit('editOk', res);
					}
				})
			},
		}
	};
</script>

<style scoped>
	.container {
		padding: 30rpx 0;
		box-sizing: border-box;
		padding-bottom: 0rpx;
		position: relative;
	}

	.ql-container {
		line-height: 200%;
		font-size: 30rpx;
		width: calc(100% - 60rpx);
		height: 350rpx !important;
		margin: 0 auto;
		min-height: 350rpx;
	}

	.tool-view {
		width: 100%;
	}

	.tool {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 100%;
		background: #eee;
	}

	.font-more {
		position: absolute;
		left: 0;
		bottom: 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 100%;
		background: rgb(235, 235, 235);
		overflow: hidden;
		transition: all 0.15s;
	}

	.setting-layer {
		position: absolute;
		bottom: 100rpx;
		background: #fff;
		width: 250rpx;
		right: 20rpx;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
		border-radius: 8rpx;
	}

	.setting-layer .single {
		height: 80rpx;
		font-size: 32rpx;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		line-height: 80rpx;
		flex-direction: row;
		color: #666;
	}

	.setting-layer .single .icon {
		margin-right: 20rpx;
	}

	.setting-layer-mask {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background: transparent;
	}
</style>